<template>
  <div>
    <div class="header-tool">
      <a-button
        type="primary"
        @click="handleEdit()"
      >
        新增
      </a-button>
      <a-button
      class="mr10"
      type="primary"
      @click="reLoad()"
    >
      刷新
    </a-button>
    </div>

    <a-table
      :row-key="(record) => record.news_id"
    
      :columns="newColumns"
      :dataSource="activities"
       @change="handleTableChange"
      :pagination="
        isObject(pagination)
          ? {
              showQuickJumper: true,
              total: pagination.total,
              current: pagination.current,
              pageSize: pagination.pageSize,
              showTotal: (total) => `共计 ${pagination.total} 条`
            }
          : false
      "
    >
      <template #bodyCell="{ column, record }">
       
        <!-- <template v-if="column.dataIndex === 'is_on'">
          <a-switch
            @change="changeDel($event, record)"
            checked-children="是"
            un-checked-children="否"
            v-model:checked="record.is_on"
          />
        </template> -->

        <template v-if="column.dataIndex === 'action'">
          <span>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              class="gap-popconfirm"
              title="确定删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleDelete(record)"
            >
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </template>
    </a-table>

    <virtualProductsForms
      ref="productFormEle"
      :showAddDialog="showAddDialog"
      @success="handleActivityAdded"
      @close="showAddDialog = false"
    />
  </div>
</template>

<script setup>
  import { isObject } from 'lodash-es'
  import { message } from 'ant-design-vue'

  import { ref, onMounted, reactive, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElButton, ElTable, ElTableColumn, ElDialog } from 'element-plus'
  import virtualProductsForms from './virtualProductsForms.vue'
  import { productList, productDelete, productPublish } from '@/api/index'
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })
  const activeKey = ref('1')
  const raffle = ref(null)
  const activities = ref([])
  const newColumns = [
    // {
    //   title: 'id',
    //   dataIndex: 'product_id',
    //   key: 'ID'
    // },
    {
      title: '产品名称',
      dataIndex: 'product_name'
    },
    
    {
      title: '回扣系数',
      dataIndex: 'proportion'
    },
    {
      title: '产品积分',
      dataIndex: 'product_point'
    },
    
    {
      title: '备注',
      dataIndex: 'remark',
      ellipsis: true,
    },
    // {
    //   title: '是否发布',
    //   dataIndex: 'is_on'
    // },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      key: 'created_at'
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action'
    }
  ]
 
  const mapRows = ref([])
 
  const onSelectChange = (selectedRowKeys, selectedRows) => {
    mapRows.value = selectedRowKeys
  }
   
  
  const productFormEle = ref()
  const showAddDialog = ref(false)
 

  const getList = () => {
    productList({
      page: pagination.current,
      pageSize: pagination.pageSize
    })
      .then((res) => {
        if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
        activities.value = res.data

        if (res.data.length > 0) {
          raffle.value = res.data[0].point
        }
        pagination.total = res.total
      })
      .catch((err) => {
        console.log(err)
      })
  }
  const reLoad = () => {
    pagination.current = 1
    getList()
  }
  getList()
  const handleTableChange = ({ current, pageSize }) => {
    pagination.current = current
    pagination.pageSize = pageSize
    getList() 
  }
  // 编辑
  const handleEdit = (row) => {
    showAddDialog.value = true
    productFormEle.value.init(row)
  }
  const changeDel = (e, row) => {
    productPublish({  product_id: row.product_id, is_on: e })
      .then((res) => {
        if(res.errorCode){
          row.is_on = !e
        message.error(res.msg||'操作失败')
        return
      }
        getList()  
      })
      .catch((error) => {
        row.is_on = !e
      })
  }
  const handleDelete = (row) => {
    productDelete({ product_id: row.product_id })
      .then((res) => {
        if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
        getList() // Refresh activity list after deletion
      })
      .catch((error) => {
        console.error('Error deleting activity:', error)
      })
  }

  const handleActivityAdded = () => {
    getList() // Refresh activity list after adding
    showAddDialog.value = false // Close the dialog
  }

  // onMounted(fetchActivities);
</script>

<style scoped>
  .header-tool {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .header-tool button {
    margin-right: 5px;
  }
</style>
